<img style="position:absolute;left:200px;top:200px;width:20px;height:20px;" id="wom"/>
<img style="position:absolute;left:0px;top:0px;width:20px;height:20px;" id="men"/>
<script>
var myup=false
var mydn=false
var mylf=false
var myrt=false

document.onkeydown=mykeydown;
document.onkeyup=mykeyup;
setInterval("myinterval()",100);

function myinterval(){
menmov();
wommov();
}

function menmov(){
var x=parseInt(wom.style.left)-parseInt(men.style.left);
var y=parseInt(wom.style.top)-parseInt(men.style.top);
if(x!=0||y!=0){
//var r=Math.sqrt(x*x+y*y);
var n=Math.atan2(y,x);
if(n>-Math.PI  /8&&n<= Math.PI  /8){mov(men,1);}
if(n> Math.PI  /8&&n<= Math.PI*3/8){mov(men,2);}
if(n> Math.PI*3/8&&n<= Math.PI*5/8){mov(men,3);}
if(n> Math.PI*5/8&&n<= Math.PI*7/8){mov(men,4);}
if(n> Math.PI*7/8||n<=-Math.PI*7/8){mov(men,5);}
if(n>-Math.PI*7/8&&n<=-Math.PI*5/8){mov(men,6);}
if(n>-Math.PI*5/8&&n<=-Math.PI*3/8){mov(men,7);}
if(n>-Math.PI*3/8&&n<=-Math.PI  /8){mov(men,8);}
}
}

function mov(p,d){
switch(d){
case 1:p.style.left=parseInt(p.style.left)+10+"px";break;
case 3:p.style.top=parseInt(p.style.top)+10+"px";break;
case 5:p.style.left=parseInt(p.style.left)-10+"px";break;
case 7:p.style.top=parseInt(p.style.top)-10+"px";break;
case 2:mov(p,1);mov(p,3);break;
case 4:mov(p,3);mov(p,5);break;
case 6:mov(p,5);mov(p,7);break;
case 8:mov(p,7);mov(p,1);break;
}
}

function wommov(){
if(myup){mov(wom,7);}
if(mydn){mov(wom,3);}
if(mylf){mov(wom,5);}
if(myrt){mov(wom,1);}
}

function mykeydown(){
switch(event.keyCode){
	case 87:
		myup=true;
		break;
	case 83:
		mydn=true;
		break;
	case 65:
		mylf=true;
		break;
	case 68:
		myrt=true;
		break;
}
}

function mykeyup(){
switch(event.keyCode){
	case 87:
		myup=false;
		break;
	case 83:
		mydn=false;
		break;
	case 65:
		mylf=false;
		break;
	case 68:
		myrt=false;
		break;
}
}

</script>